<template>
  <view class="reset update-pass-form u-p-20">
    <uni-forms
      ref="updatePassForm"
      :model="updatePassForm"
      :rules="updatePassFormRules"
      label-position="top"
      label-width="100%"
      validate-trigger="bind"
    >
      <uni-forms-item name="originalPassword" label="原密码">
        <uni-easyinput placeholder="请输入原密码" v-model="updatePassForm.originalPassword" type="password" />
      </uni-forms-item>
      <uni-forms-item name="newPassword" label="新密码">
        <uni-easyinput placeholder="请输入新密码" v-model="updatePassForm.newPassword" type="password" />
      </uni-forms-item>
      <uni-forms-item name="confirmPassword" label="确认密码">
        <uni-easyinput placeholder="请再次输入新密码" v-model="updatePassForm.confirmPassword" type="password" />
      </uni-forms-item>
      <uni-forms-item>
        <u-button :loading="loading" loadingText="更新中" color="#4870da" @click="updateSubmit">提 交</u-button>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import { apiUpdatePassword } from '@api/sys/users';

export default {
  data() {
    const equalToPassword = (rule, value, data, callback) => {
      if (this.updatePassForm.newPassword !== value) {
        // eslint-disable-next-line
        callback('两次输入的密码不一致');
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, data, callback) => {
      const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/;
      if (!reg.test(value)) {
        // eslint-disable-next-line
        callback('请设置8位及以上包含大写字母、小写字母、数字和特殊符号中至少三种组合的密码。');
      } else {
        if (value === this.loginName || value === this.loginName.split('').reverse().join('')) {
          // eslint-disable-next-line
          callback('不能和账号或者是账号的倒写相同');
        } else {
          callback();
        }
      }
    };
    return {
      loading: false,
      updatePassForm: {
        userId: '',
        newPassword: '',
        originalPassword: '',
        confirmPassword: ''
      },
      updatePassFormRules: {
        originalPassword: { rules: [{ required: true, errorMessage: '请输入旧密码' }] },
        newPassword: {
          rules: [
            { required: true, errorMessage: '请输入新密码' },
            { required: true, validateFunction: validatePass }
          ]
        },
        confirmPassword: {
          rules: [
            { required: true, errorMessage: '确认密码不能为空' },
            { required: true, validateFunction: equalToPassword }
          ]
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'loginName'
    ])
  },
  methods: {
    updateSubmit() {
      this.$refs.updatePassForm.validate().then(() => {
        this.loading = true;
        apiUpdatePassword(this.updatePassForm).then(res => {
          const { success, message } = res;
          if (success) {
            uni.showToast({
              title: '修改成功',
              icon: 'success',
              duration: 2000
            });
            this.$store.dispatch('user/logOut').then(() => {
              uni.reLaunch({
                url: '/pages/tabBar/role'
              })
            })
          } else {
            uni.showModal({
              title: '提示',
              content: message,
              showCancel: false
            });
          }
          this.loading = true;
        }).catch(() => {
          this.loading = true;
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.update-pass-form {
  height: 100%;
  background: #fafafa;
  .reset {
    height: 100%;
  }
}
</style>
